<template>
  <div class="mine">
    <h1>饿了吗</h1>
    <div class="user">
      <div class="img">
        <img src="" alt="" />
      </div>
      <div class="name">
        <div class="id">用户名id： 2217</div>
        <div class="phone">用户手机号：19937786373</div>
      </div>
      <div class="btn">
        <button>去登录</button>
        <span>退出登陆</span>
      </div>
    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="tool">
      <h2>常用工具</h2>
      <div class="tool-list">
        <div class="lists" v-for="(item, index) in menulist" :key="index">
          <div @click="goto(item.url)">
            <van-icon class="icon" :name="item.name" />
            <span>{{ item.text }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="tag">
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script>
import { reactive, ref ,onBeforeMount} from "vue";
let menulist = ref([
  { id: 1, name: "location-o", text: "我的地址", url: "/address" },
  { id: 1, name: "service-o", text: "我的客服" },
  { id: 1, name: "like-o", text: "店铺关注", url: "/collection" },
  { id: 1, name: "star-o", text: "评价有礼" },
]);
</script>

<style lang="css" scoped>
.mine {
  box-sizing: border-box;
  padding: 10px;
}
.mine h1 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
}
.mine .user {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mine .user .img img {
  height: 50px;
  border-radius: 50%;
}
.mine .user .name .id {
  font-size: 18px;
  font-weight: 700;
}
.mine .user .name .phone {
  font-size: 14px;
  color: rgb(160, 155, 155);
}
.mine .user .btn {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  flex-direction: column;
}
.mine .user .btn span {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 0 5px;
}
.mine .user .btn button {
  width: 80px;
  height: 25px;
  text-align: center;
  line-height: 20px;
  border-radius: 20px;
  background-color: white;
  border: 1px solid gray;
  margin-bottom: 10px;
}
.mine .user .btn span {
  text-align: center;
}
.mine .box {
  width: 100%;
  height: 80px;
  background-color: pink;
  margin-bottom: 10px;
  border-radius: 10px;
}
.mine .tool .tool-list {
  margin-top: 20px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mine .tool .tool-list .lists div {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.mine .tool .tool-list .lists .icon {
  font-size: 26px;
}
.mine .tool .tool-list .lists span {
  font-size: 14px;
}
.mine .tag {
  height: 250px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.mine .tag div {
  width: 47%;
  height: 100%;
  background-color: pink;
  border-radius: 10px;
}
</style>